<template>
  <div class="person-info">
    <!-- 顶部 -->
    <van-nav-bar
      title="编辑个人资料"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 头像 -->
    <div class="user-img">
      <!-- <van-image 
      round
      fit="cover"
      width="6rem"
      height="6rem"
      :src="`${userInfo.userImg}`"
    /> -->
      <van-uploader
        preview-size="96px"
        :after-read="uploadImg"
        v-model="fileList"
      >
        <van-image
          round
          fit="cover"
          width="6rem"
          height="6rem"
          :src="userImg"
        />
      </van-uploader>
    </div>

    <!-- 修改信息 -->
    <van-cell-group>
      <van-field v-model="username" label="昵称" />

      <van-radio-group class="sex-info" v-model="sex" direction="horizontal">
        <!-- <van-field v-model="sex" label="性别" disabled style="width: 50%" /> -->
        <span>性别：</span>
        <van-radio name="男">男</van-radio>
        <van-radio name="女">女</van-radio>
      </van-radio-group>
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="tel" type="tel" label="手机号" disabled/>
    </van-cell-group>

    <div class="hold-btn">
      <van-button type="info" block @click="updateUser">保存</van-button>
    </div>
  </div>
</template>

<script>
// 引入state函数
import { mapState } from "vuex";

export default {
  data() {
    return {
      username: "",
      sex: "",
      tel: "",
      userInfo: "", //用户信息
      userImg: "", //用户头像路径
      fileList: [],
    };
  },
  methods: {
    //顶部左槽返回上一级
    onClickLeft() {
      this.$router.back(-1);
    },
    // 上传前的文件
    beforeRead(file) {
      if (file.type !== "image/jpeg") {
        Toast("请上传 jpg 格式图片");
        return false;
      }
      console.log(`上传前的文件信息：${file}`);
      return true;
    },
    // 上传后的文件
    uploadImg(file) {
      // 此时可以自行将文件上传至服务器

      console.log(file);
      const params = new FormData();
      params.append("file", file.file);
      params.append("userId", this.userId);
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      this.axios
        .post("/api/user/uploadHeadImg", params, config)
        .then((result) => {
          console.log(result);
        });
    },
    // 更新用户信息
    updateUser() {
      if (this.sex == "男") {
        this.sex = 1;
      } else {
        this.sex = 0;
      }
      this.axios
        .post(
          "/api/user/updateUser",
          `userName=${this.username}&sex=${this.sex}`
        )
        .then(result => {
          // 测试
          // console.log(result);
          if (result.data.code == 200) {
            this.$toast({
              message: `修改成功！`,
              position: "center",
              duration: 3000,
            });
            if (this.sex == 1) {
              this.sex = "男";
            } else {
              this.sex = "女";
            }
            console.log(`修改内容:昵称：${this.username},性别：${this.sex}`);
            this.$router.back(-1);
            return;
          } else {
            this.$toast({
              message: `修改失败！`,
              position: "center",
              duration: 3000,
            });
            return;
          }
        });
    },
  },
  // 结构变量
  computed: {
    ...mapState(["isLogin", "userId"]), //是否登录
  },
  //页面挂载
  mounted() {
    // 获得当前用户id
    this.axios.get(`/api/user/getUser?userId=${this.userId}`).then((result) => {
      // console.log(result);
      // 用户信息
      this.userInfo = result.data.data; //得到用户信息
      // console.log(this.userInfo);
      this.username = this.userInfo.userName;
      this.tel = this.userInfo.phone;
      this.userImg = this.userInfo.userImg;
      // console.log(`当前图片：${this.fileList.url}`);
      // console.log(this.userInfo.sex);
      // 将boolean数据转换文字
      if (this.userInfo.sex == true) {
        this.sex = "男";
      } else if (this.userInfo.sex == false) {
        this.sex = "女";
      } else {
        this.sex = "保密";
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.person-info {
  .user-img {
    margin: 20px auto;
    text-align: center;
  }
  .hold-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
.sex-info {
  padding: 10px 15px;
  color: #646566;
  font-size: 14px;
  span {
    margin-right: 55px;
  }
}
</style>